import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom'
import { PlusOutlined } from '@ant-design/icons';
import {
    message,
    Form,
    Input,
    Button,
    Select,
    Upload,
    Image,
} from 'antd';

import request from '@/utils/request'

const BooksChange = () => {
    const navigate = useNavigate()

    const { id } = useParams();


    const [booktype,setbooktype] = useState([])

    const submit = async (values) => {
        const { data } = await request.post('/books/add', values)
        if (data.code === 200) {
            message.success('小说添加成功')
            navigate('/manage/book_list')
        }
    }

    useEffect(() => {
        request.get('/booktype/list').then(({data})=>{
            setbooktype(data.data)
        })
    }, [])
    return (
        <div>
            <Form
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
                layout="horizontal"
                onFinish={submit}
            >   
            <Form.Item
                wrapperCol={{
                offset: 4,
                span: 16,
                }}
            >
                <h1 className='useradd_head'>添加小说</h1>
            </Form.Item>
                <Form.Item label="小说名称" name="book">
                    <Input />
                </Form.Item>
                <Form.Item label="小说作者" name='author'>
                    <Input />
                </Form.Item>
                <Form.Item label="小说热度" name='hot'>
                    <Input/>
                </Form.Item>
                <Form.Item label="小说类型" name='booktype'>
                    <Select>
                        {
                            booktype.map(item=>(
                                <Select.Option key={item.id} value={item.booktype}>{item.booktype}</Select.Option>
                            ))
                        }
                    </Select>
                </Form.Item>
                <Form.Item label="商品描述" name='brief'>
                    <Input.TextArea rows={4} />
                </Form.Item>
                <Form.Item label="小说封面" valuePropName="fileList">
                    <Upload action="/upload.do" listType="picture-card">
                            <div>
                                <PlusOutlined />
                                <div style={{ marginTop: 8 }}>Upload</div>
                            </div>    
                    </Upload>
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 4 }}>
                    <Button type='primary' htmlType='submit'>修改</Button>
                </Form.Item>
            </Form>

        </div>
    )
}


export default BooksChange;